<template>
    <div class="contain" v-if="JSON.stringify(questionInfo)!='{}'">
        <div class="title-box">
            <div class="border-item"><img src="../../../../assets/image/sucai/edit.png" alt=""></div>
            <span>{{
                    type == 1 ? '单选题' : '多选题'
                }} {{ this.idx + 1 }}/{{ this.questionList[this.typeIndex].quest.length }}</span>
        </div>
        <div class="question-info">
            <div class="title">{{ questionInfo.title }}</div>
<!--            <div class="collect-item">-->
<!--                <a-icon class="star-icon" type="star"/>-->
<!--                <span>收藏本题</span>-->
<!--            </div>-->
            <div>
                <a-form>
                    <a-form-item class="radio-item">
                        <a-radio-group v-if="type=='1'" v-decorator="['radio-group']"
                                       v-model="questionInfo.user_anser_text[0]"
                                       :disabled="true">
                            <a-radio :value="item" v-for="(item,index) in questionInfo.items" :key="index"
                                     @change="onChangeRadio">
                                {{ item }}
                            </a-radio>

                        </a-radio-group>
                        <a-checkbox-group v-else @change="onChange" v-model="questionInfo.user_anser_text"
                                          :disabled="true">
                            <a-row v-for="(item,index) in questionInfo.items" :key="index">
                                <a-checkbox :value="item">
                                    {{ item }}
                                </a-checkbox>
                            </a-row>
                        </a-checkbox-group>
                    </a-form-item>
                </a-form>
            </div>
            <div v-show="currentTab==1">
                <a-button :disabled="preDisabled" class="pre-btn" shape="round" @click="changeQues('pre')">
                    上一题
                </a-button>
                <a-button class="next-btn" type="primary" ghost shape="round" :disabled="nextDisable"
                          @click="changeQues('next')">
                    下一题
                </a-button>
            </div>
            <div>
                <!--      <div>-->
                <div class="analysis-info">
                    <div class="answer-right">
                        <div>
                            <a-icon type="check-circle" v-if="questionInfo.answ==questionInfo.user_anser" plain
                                    style="color: green;font-size:35px;"/>
                            <a-icon type="close-circle" v-else plain style="color: red;font-size:35px;"/>
                            <span class="right-title">正确答案</span><span class="right-answer">{{
                                questionInfo.answ
                            }}</span>
                            <span class="your-title">你的答案</span><span class="error-answer">{{
                                questionInfo.user_anser || '无'
                            }}</span>
                        </div>
                        <div class="right-percent">
                            全站正确率：90%
                        </div>
                    </div>
                    <div class="analysis-answer">
                        <div>
                            <div class="title">解析</div>

                            <div class="content">{{ questionInfo.analysis_desc }}</div>
                        </div>
                        <div v-if="questionInfo.video_address!='-'">
                            <div class="title">视频解析</div>
                            <div class="content">
                                <video :src="questionInfo.video_address" controls></video>
                            </div>
                            <div class="video-tip">
                                <img src="@/assets/image/icons/video.png" alt=""><span>考查知识点（概念）</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div v-show="false">
                    <div class="has-ques">
                        <div>
                            优质答疑
                        </div>
                        <a class="right-percent">
                            还有疑问？去提问
                        </a>
                    </div>
                    <div class="question-list" v-for="(item,index) in 3" :key="index">
                        <span class="left-ask">问</span>
                        <div class="content">
                            <div class="square-item"></div>
                            <div>
                                <span class="title">标题：听不懂</span>
                                <span class="date">2020-10-10 12:11</span>
                            </div>
                            <div>
                                加强企业内部的沟通，使部门目标与公司整体目标趋于一致，才能产生最优决策。
                            </div>
                            <div><span>老实回答：</span><span class="teacher-answer">不会，总体来说难度不大，只要努力，相信自己可以的！！加油！！！</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import bus from '@/plugins/eventBus';

export default {
    name: 'questionDtl',
    props: ['questionList', 'locationObj'],
    data() {
        return {
            type: '',
            questionInfo: {},//题目信息
            questCount: 4,
            typeIndex: null,//0是单选 1是多选
            id: null,//当前是第几道题的id值
            idx: null,//当前题目的索引
            preDisabled: false,
            nextDisable: false,
            currentTab: 1,//全部
            value: null,//选择的数据
            submitFlag: 'submit',
            myAnswer: []
        }
    },
    mounted() {
        // 监听点击了某一题
        bus.$on('selectQuest', (type, id, idx) => {//题型，当前在第几条数据
            this.type = type;
            this.typeIndex = type == 1 ? 0 : 1;//type==1是单选 2是多选
            this.id = id;
            this.idx = idx;
            console.log(type, id, idx,this.questionList);
            this.showInfo()//渲染页面数据
        })
        //监听未答和已答tab切换
        bus.$on('changeTab', (index) => {//题型，当前在第几条数据
            this.questionInfo = {};
            this.currentTab = index;
        })
    },
    methods: {
        getAllText(answer, data) {
            console.log(answer, data);
            let arrayData = [];
            if (answer.indexOf('A') > -1) {
                arrayData = arrayData.concat(data[0]);
            }
            if (answer.indexOf('B') > -1) {
                arrayData = arrayData.concat(data[1]);
            }
            if (answer.indexOf('C') > -1) {
                arrayData = arrayData.concat(data[2]);
            }
            if (answer.indexOf('D') > -1) {
                arrayData = arrayData.concat(data[3]);
            }
            console.log(arrayData);
            return arrayData
        },
        isRight(answer, isArray) {
            let aIndex = answer.indexOf('A') > -1 ? answer.indexOf('A') : null;
            let bIndex = answer.indexOf('B') > -1 ? answer.indexOf('B') : null;
            let cIndex = answer.indexOf('C') > -1 ? answer.indexOf('C') : null;
            let dIndex = answer.indexOf('D') > -1 ? answer.indexOf('D') : null;
            let data = [];
            if (aIndex != null) {
                data = data.concat('A');
            }
            if (bIndex != null) {
                data = data.concat('B');
            }
            if (cIndex != null) {
                data = data.concat('C');
            }
            if (dIndex != null) {
                data = data.concat('D');
            }
            if (!isArray) {//不需要是数组形式,isArray
                data = data.toString().replace(/,/g, '');
            }
            return data;
        },
        // 点击上一题或者提交或者下一题
        changeQues(type) {
            this.showInfo(type)
        },
        // 获取当前题型中已答和未答的索引值
        getQuestions(data) {
            let toanswerIndex = [];
            data.forEach((item, index) => {
                toanswerIndex.push(index)
            })
            return toanswerIndex
        },
        showInfo(type) {
            if (!type) {
                // 数据重置
                let toanswerIndex = [];//已答题的索引值，当前的索引值
                toanswerIndex = this.getQuestions(this.questionList[this.typeIndex].quest);
                this.getInfo();
                this.changeDisabledBtn(toanswerIndex, this.idx)
            } else {//如果是上一题或者下一题
                // 数据重置
                this.value = [];
                this.myAnswer = [];
                let toanswerIndex = [];//已答题的索引值，当前的索引值
                toanswerIndex = this.getQuestions(this.questionList[this.typeIndex].quest);
                this.changeDisabledBtn(toanswerIndex, this.idx)
                if (type == 'pre') {
                    this.idx = this.idx - 1;
                } else {
                    this.idx = this.idx + 1;
                }
                this.id = this.questionList[this.typeIndex].quest[this.idx].id;
                if (this.idx >= 0 && this.idx <= this.questionList[this.typeIndex].quest.length - 1) {
                    this.id = this.questionList[this.typeIndex].quest[this.idx].id;//当前数据的id
                    this.showInfo()
                    bus.$emit('changeQuestion', type, this.id, this.type)//是上一题还是下一题，当前在第几条数据的id值，题型
                }
            }

        },
        getInfo() {
            let data = this.questionList[this.typeIndex].quest[this.idx];
            this.questionInfo = {//题目赋值
                title: data.question_content,
                items: [data.choiceqst_op1, data.choiceqst_op2, data.choiceqst_op3, data.choiceqst_op4],
                answ: data.answ,
                user_anser: data.user_anser,
                user_anser_text: this.getAllText(data.user_anser, [data.choiceqst_op1, data.choiceqst_op2, data.choiceqst_op3, data.choiceqst_op4]),
                isEnd: data.isEnd || false,
                video_address: data.video_address,
                analysis_desc: data.analysis_desc,
            };

        },
        // 控制上一题按钮是否能点
        changeDisabledBtn(dataArray, idx) {
            if (dataArray.length > 1) {
                if (dataArray.indexOf(idx) == 0) {//在第一题
                    this.preDisabled = true;
                    this.nextDisable = false;
                } else if (dataArray.indexOf(idx) == dataArray.length - 1) {//最后一个
                    this.preDisabled = false;
                    this.nextDisable = true;
                } else {
                    this.preDisabled = false;
                    this.nextDisable = false;
                }
            } else if (dataArray.length == 1) {
                this.preDisabled = true;
                this.nextDisable = false;
            } else if (dataArray.length == 0) {
                if (idx == 0) {
                    this.preDisabled = true;
                    this.nextDisable = false;
                } else {
                    this.preDisabled = false;
                }
            }


        },
        // 多选选择
        onChange(e) {
            this.value = e;
            // if (this.submitFlag == 'next') return
            this.myAnswer = [];
            e.forEach((item) => {
                this.myAnswer.push(item.split('.')[0]);
                this.myAnswer = this.isRight(this.myAnswer, true);
            })
        },
        //选择单选
        onChangeRadio(e) {
            let value = [e.target.value];//完整的答案 用来渲染选项用
            this.value = value;
            // if (this.submitFlag == 'next') return
            this.myAnswer = value[0].split('.')[0];//只有ABCD选项的答案
        }
    }
}
</script>

<style scoped lang="scss">
.contain {
    position: relative;
    height: 100%;

    .title-box {
        height: 60px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        color: #333333;
        font-weight: bold;
        padding: 0 40px;

        .border-item {
            border: 1px solid #0079fe;
            border-radius: 50%;
            padding: 3px;
            margin-right: 10px;


        }

        img {
            width: 14px;
            height: 14px;
            position: relative;
        }

        img::before {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            border: 1px solid #0079fe;
            position: absolute;
            top: 0;
            left: 0;
        }

    }

    .question-info {
        padding: 1% 5%;
        position: relative;

        .title {
            margin-bottom: 20px;
            max-width: 80%;
        }

        .collect-item {
            position: absolute;
            top: 5%;
            right: 5%;
            display: flex;
            align-items: center;
            cursor: pointer;

            .star-icon {
                color: #E3E3E3;
                font-size: 24px;

            }

            span {
                margin-left: 10px;
            }
        }

        .ant-radio-group > label {
            margin-bottom: 20px;
            max-width: 100%;
            width: 100%;
            white-space: pre-wrap;
        }

        .ant-checkbox-group label {
            margin-bottom: 20px;
            max-width: 800px;
            white-space: pre-wrap;
        }

        .pre-btn {
            margin-right: 40px;
        }

        .analysis-info {
            padding: 5% 0;
            position: relative;

            & > div {
                margin-bottom: 40px;
            }

            .answer-right {
                border: 1px solid #D7D7D7;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;

                & > div:first-child {
                    padding: 10px;
                    height: 60px;

                }

                img {
                    display: inline-block;
                    margin-right: 50px;
                    height: 30px;
                    width: 30px;
                }

                .right-title, .your-title {
                    margin-right: 20px;
                    margin-left: 20px;
                }

                .right-answer, .your-answer {
                    margin-right: 40px;
                }

                .error-answer {
                    font-size: 20px;
                    color: #EA3324;

                }

                .right-answer {
                    font-size: 20px;
                    color: #000000;

                }

                .right-percent {
                    background-color: #F2F2F2;
                    position: absolute;
                    color: #999999;
                    right: -1px;
                    top: -1px;
                    height: 62px;
                    line-height: 62px;
                    padding: 0 10px;

                }

            }

            .analysis-answer {
                display: flex;

                & > div {
                    padding: 20px;

                    border: 1px solid #D7D7D7;

                    .title {
                        color: #666666;
                        font-size: 16px;
                        margin-bottom: 20px;
                    }

                    flex-basis: 50%;
                }

                & > div:first-child {
                    //border-right: none;
                }

                .video-tip {
                    color: #2C68D6;
                    font-size: 12px;
                    margin-top: 20px;

                    img {
                        width: 21px;
                        height: 17px;
                        display: inline-block;
                        margin-right: 10px;

                    }
                }

            }

        }

        .has-ques {
            height: 60px;
            border: 1px solid #D7D7D7;
            line-height: 60px;
            margin-bottom: 40px;

            & > div {
                display: inline-block;
                height: 100%;

            }

            & > div:first-child {
                width: 200px;
                background: url("../../../../assets/image/icons/blue-icon.png") no-repeat;
                background-position: 0 0;
                color: #fff;
                background-size: auto 100%;
                font-weight: bold;
                padding-left: 10px;
            }

            & > a {
                float: right;
                text-decoration: #006ADE;
                text-decoration: underline;
                margin-right: 40px;
                font-weight: bold;
            }
        }

        .question-list {
            .left-ask {
                width: 33px;
                height: 33px;
                line-height: 33px;
                text-align: center;
                background-color: #83B3D6;
                color: #fff;
                font-weight: bold;
                border-radius: 50%;
                display: inline-block;
                vertical-align: top;
            }

            .content {
                border: 1px solid #D7D7D7;
                display: inline-block;
                width: calc(100% - 50px);
                margin-left: 17px;
                padding: 20px;
                position: relative;

                .square-item {
                    transform: rotate(45deg);
                    position: absolute;
                    left: -8px;
                    top: 14px;
                    width: 14px;
                    height: 14px;
                    border: 1px solid #D7D7D7;
                    border-top: 0px;
                    border-right: 0px;
                    background-color: #ffffff;
                }

                .title {
                    color: #333333;
                    font-weight: bold;
                    max-width: 80%;
                    white-space: pre-wrap;
                    display: inline-block;
                }

                .date {
                    float: right;
                }

                .teacher-answer {
                    color: #006ADE;
                }

                & > div:not(:first-child) {
                    margin-bottom: 20px;
                }
            }

        }
    }
}
</style>
